<template>
	<view class="page-add-upload">
		<u-navbar :is-back="true" :border-bottom="false" title-bold title="添加上传" title-color="#000" title-size="36rpx"
		 :title-bold="true"></u-navbar>
		 <u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change" :bar-style="{background:'#c40200'}"
		 :bar-width="100" active-color="#c40200"></u-tabs>
		<u-form v-if="current == 0" class="form" :model="form" ref="uForm">
			<u-form-item label="标题" prop="title">
				<u-input v-model="form.title" placeholder="请输入标题"/>
			</u-form-item>
			<u-form-item label="标签" prop="tag">
				<u-input v-model="form.tag" placeholder="请输入标签"/>
			</u-form-item>
			<u-form-item label="上传" prop="file1">
				<view class="upload u-flex u-row-center u-col-center" @click="uploadFile">
					<view v-if="file" class="del-icon u-flex u-row-center u-col-center" @click.stop="del">
						<u-icon name="close" color="#ddddde" size="30"></u-icon>
					</view>
					<view class="">
						<span v-if="file" style="font-size: 26rpx;">文件已上传</span>
						<u-icon v-else name="plus" color="#ddddde" size="30"></u-icon>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="简介" prop="intro">
				<u-input v-model="form.intro" placeholder="请输入简介"
				:auto-height="true" height="40"/>
			</u-form-item>
		</u-form>
		<u-form v-if="current == 1" class="form" :model="form" ref="uForm">
			<u-form-item label="标题" prop="title">
				<u-input v-model="form.title" placeholder="请输入标题"/>
			</u-form-item>
			<u-form-item label="标签" prop="tag">
				<u-input v-model="form.tag" placeholder="请输入标签"/>
			</u-form-item>
			<u-form-item label="网盘" prop="bdlj">
				<u-input v-model="form.bdlj" placeholder="请输入网盘链接"/>
			</u-form-item>
			<u-form-item label="密码" prop="bdmm">
				<u-input v-model="form.bdmm" placeholder="请输入网盘编码"/>
			</u-form-item>
			<u-form-item label="简介" prop="intro">
				<u-input v-model="form.intro" type="textarea" placeholder="请输入简介" 
				:auto-height="true" height="40"/>
			</u-form-item>
		</u-form>
		<u-button type="error" shape="circle" class="custom-style" @click="submit">保存</u-button>
		<u-toast ref="uToast" />
		<u-modal v-model="show" content="确定删除吗？"
		:show-cancel-button="true" @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import { commonGet } from "@/api/commonapi.js"
	import uploadFile from "@/common/uploadFile.js"
	export default {
		mixins:[uploadFile],
		data() {
			return {
				show:false,
				tabList: [{
					name: '快速上传'
				}, {
					name: '网盘上传'
				}],
				current: 0,
				form: {
					title: '',
					tag: '',
					file1:'',
					intro: '',
					bdlj: '0',
					bdmm: '0'
				},
				rules: {
					title: [
						{
							required: true,
							message: '请输入标题',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}
					],
					tag: [
						{
							required: true,
							message: '请输入标签',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'blur,change'
						}
					],
					file1: [
						{
							required: true,
							message: '请上传文件',
							// 可以单个或者同时写两个触发验证方式
							trigger: 'change'
						}
					],
					intro: [
						{
							required: true,
							min: 5,
							message: '简介不能少于5个字',
							trigger: 'change'
						}
					],
					bdlj: [
						{
							required: true,
							message: '请输入网盘链接',
							trigger: 'blur,change'
						}
					],
					bdmm: [
						{
							required: true,
							message: '请输入网盘编码',
							trigger: 'blur,change'
						}
					]
				}
			}
		},
		onLoad() {
			this.form.file1 = this.file
		},
		watch:{
			file(newValue,oldValue){
				this.form.file1 = newValue
			},
			current(newValue,oldValue){
				if(newValue == 0){
					this.form.bdlj = '0'
					this.form.bdmm = '0'
				}else{
					this.form.bdlj = ''
					this.form.bdmm = ''
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			del(){
				this.show = true;
			},
			confirm(){
				this.file = ""
			},
			submit(){
				let _this = this
				_this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log(_this.form.file1)
						let query = {
							ak:_this.$store.state.token,
							cmd:"nUpFiles_add_proc",
							para:JSON.stringify({
								"pageid":"3305",
								"title":_this.form.title,
								"tags":_this.form.tag,
								"wjlj":_this.form.file1,
								"bdlj":_this.form.bdlj,
								"bdmm":_this.form.bdmm,
								"ndesc":_this.form.intro
							})
						}
						commonGet(query,({Message})=>{
							if(Message == "操作完成"){
								_this.$refs.uToast.show({
									title: '保存成功',
									type: 'success',
									back:true
								})
							}
							
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss">
.page-add-upload{
	.form{
		padding: 0 30rpx;
	}
	.upload{
		width: 160rpx;
		height: 160rpx;
		border: 1px solid #ddddde;
		position: relative;
		.del-icon{
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 0;
			right: 0;
			border-radius: 0 0 0 100%;
			background-color: rgba(0,0,0,.5);
		}
	}
	.custom-style{
		background-color: #c40200;
		margin: 73rpx 30rpx;
		font-size: 30rpx;
	}
}
</style>
